<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<title>Dicey Die, the Dice Game</title>
<link type="text/css" href="/media/jquery/css/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/jquery/development-bundle/jquery-1.3.2.js"></script>  
<script type="text/javascript" src="/media/jquery/js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="/media/json2.js"></script>

<script type="text/javascript">   
/* <![CDATA[ */

function toggle_dice_keep()
{
	//alert($(this).attr("class"));
	if ($(this).hasClass("selected"))
	{
		$(this).switchClass('selected', 'not_selected', 200);
		$(this).attr("class", "not_selected");	//fix for safari, but no animation
	}
	else
	if ($(this).hasClass("not_selected"))
	{
		$(this).switchClass('not_selected', 'selected', 200);
		$(this).attr("class", "selected");	//fix for safari, but no animation
	}
	//alert($(this).attr("class"));
}

function game_json_parser(key, value)
{
	var type = value;

	return type;

}

function update_game_screen(game)
{
	update_dice(game['dice'], game['roll_number'], game['roll_active']);
}

function roll_callback(msg, status)
{
	if (status == "success")
	{
		
		var txt = msg.responseText;
  		var data = JSON.parse(txt)

		$("#debug").text(txt);

		if (data.success == true)
		{		
			var game_info = "";
			for(var key in data.msg)
			{
				game_info = game_info + key + ": " + data.msg[key] + "\n";
			}
	
			$("#game_info").text(game_info);
	
			//update_dice(data.msg['dice']);
			update_game_screen(data.msg);

		}
		else
		{
			alert("Did you try tampering with the game? You just performed an illegal action!")
		}
	}
	else
	{
		alert("Server failed to respond to the roll!");
		$("#debug").text("Error: Server did not respond to roll");
	}
}

function update_dice(dice, roll_number, roll_active)
{
	//alert(dice);
	var die;
	var i = 0;
	for(i=0; i<= 4; i++)
	{
		die = $("#die"+i+"_span").attr("class");	//get old die
		//alert(old_die);

		$("#die"+i+"_span").removeClass(die);
		$("#die"+i+"_span").addClass("die"+dice[i][0]);
		
		$("#die"+i+"_div").attr("class", dice[i][1]);	//selected or non_selected
		//$("#die"+i+"_span").switchClass(old_die, "die"+dice[i][0]);
		//alert("die"+dice[i][0]);
	}

	if(roll_active)
	{
		$("#roll_number").text("Roll Number: "+roll_number);
		$("#roll").attr("class", "roll_active");
		
	}
	else
	{
		$("#roll_number").text("No More Rolls Left!");
		$("#roll").attr("class", "roll_inactive");
	}
}

function roll() {

	var dice_to_roll = [];
	var i=0;
	for (i=0;i<=4;i++)
	{
		if ($("#die"+i+"_div").hasClass("not_selected"))
		{
			dice_to_roll.push(i)
		}
	}

	$.ajax({ 
		type: "POST", 
		url: document.location.href, 
		data: {action: "roll", dice_to_roll: dice_to_roll},
		cache: false,
		contentType: "application/x-www-form-urlencoded",
		dataType: "text",
		complete: roll_callback 
	 });

}


function add_click_handlers()
{
	$("#dice div").click( function() { toggle_dice_keep.apply(this) } );
	$("#roll").click( function() { roll() } );
}
                                      
$(document).ready(add_click_handlers);
   
/* ]]> */                                  
</script> 

<style type="text/css"> 
<!--
.selected, .selected_no_action {
	display: inline;
	background-color: #FF0000;
	padding: 10px;
	padding-bottom: 38px
}

.not_selected, .not_selected_no_action, .no_dice_action {
	display: inline;
	background-color: #FFFFFF;
	padding: 10px;
	padding-bottom: 38px
}

.die_span {
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px;
}

.die0 {
	background: url('/media/dice/Dice48-0.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die1 {
	background: url('/media/dice/Dice48-1.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die2 {
	background: url('/media/dice/Dice48-2.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die3 {
	background: url('/media/dice/Dice48-3.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die4 {
	background: url('/media/dice/Dice48-4.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die5 {
	background: url('/media/dice/Dice48-5.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

.die6 {
	background: url('/media/dice/Dice48-6.png')
	no-repeat;
	padding-left: 48px;
	height: 48px;
	padding-bottom: 48px
}

#game_info {
	font-family: Monospace;
	white-space: pre
}	

#debug {
	font-family: Monospace;
}

.roll_active {
	border: 2px solid blue;
}

.roll_inactive {
	border: 2px solid red;
	visibility: hidden;
}

#dice {height: 60px; padding-left: 50px; margin-left: 50px;}

-->
</style>

</head>
<body>



{% if errors %}
<div id="errors">
<ul>
	{% for tm in errors %}
	<li>{{ tm.0 }}: {{ tm.1 }}</li>
	{% endfor %}
</ul>
</div>
{% endif %}


<a href="{{ game.url }}">{{ game.url_linktext }}</a> 

<div id="game_info">
<h3>Game Info</h3>
<p>{{ game.user }}</p>
</div>


{% if game.game_continue %}
	{% if game.roll_active %}
	<p id="roll_number">Roll Number: {{ game.roll_number }}</p>
		<div id="dice" style="height: 60px;">	
			{% for diekeep in game.dice %}
			{% spaceless %}
			<div id="die{{ forloop.counter0 }}_div" class="{{ diekeep.1 }}"><span id="die{{ forloop.counter0 }}_span" class="die{{ diekeep.0 }}"></span></div>&#8194;
			{% endspaceless %}
			{% endfor %}
		</div>
			<div style="margin: 10px;">
				<a id="roll" class="roll_active">ROLL ME!</a>
			</div>
		
	{% else %}
		<p id="roll_number">No More Rolls Left!</p>
		<div id="dice" style="height: 60px;">
			{% for diekeep in game.dice %}
			{% spaceless %}
			<div id="die{{ forloop.counter0 }}_div" class="{{ diekeep.1 }}"><span id="die{{ forloop.counter0 }}_span" class="die{{ diekeep.0 }}"></span></div>&#8194;
			{% endspaceless %}
			{% endfor %}
		</div>
			<div style="margin: 10px;">
				<a id="roll" class="roll_inactive">No Roll For You!</a>
			</div>

	{% endif %}

{% else %}
<p>Game Over!</p>
{% endif %}


<p>Debug:</p>
<div id="debug">

</div>

<div id="dice_score">
{% if game.show_score_form %}
	<form action="" method="post">
{% endif %}

Score:
<ul>
{% for xyz in game.scores %}
{% spaceless %}
<li>

{% if game.show_score_form %}
{% ifequal xyz.2 Null %}
		<input type="radio" name="scorecat" value="{{ xyz.0 }}" />
{% endifequal %}
{% endif %}

{{ xyz.0 }}: 
{% ifnotequal xyz.2 Null %}
	<b>{{ xyz.2 }}</b>
{% else %}
	{% if xyz.1 %}
		{{ xyz.1 }}
	{% else %}
		--
	{% endif %}
{% endifnotequal %}
</li>
{% endspaceless %}
{% endfor %}
</ul>
{% if game.show_score_form %}
<div><input type="hidden" name="action" value="score" /></div>
<div><input type="submit" value="Score Me" /></div>
</form>
{% endif %}
</div>

<form action="" method="post">
<div><input type="hidden" name="action" value="new_game" /></div>
<div><input type="submit" value="New Game" /></div>
</form>


<div id="old_debug">
<p>Debug Info:</p>
<ul>
{% for kv in debug.items %}
<li>{{ kv.0 }}: {{ kv.1 }}</li>
{% endfor %}
</ul>
</div>


</body>
</html>